<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>在线看图网2</title>
	<!-- import CSS -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<!-- import Vue before Element -->
	<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
	<!-- import JavaScript -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
	<div id='loadControl' style='height:710px;width:100%;background-color:#ffffff;color:#e7e7e7;'>
		把图片拖到任意空白处
	</div>
	<div id="app">
		
		<template>
			<!-- 图片预览方法一 -->
			<div class="demo-image__preview">
				<el-image style="width: 0px; height: 0px" ref="preview" :src="url" :preview-src-list="srcList"></el-image>
			</div>
		</template>

	</div>
</body>

<script>
	var loadControl = document.getElementById('loadControl');
	loadControl.ondragover = function (e) {
			e.preventDefault();
		}
	loadControl.ondrop = function (e) {
		//console.log(e.dataTransfer.files);
		e.preventDefault();
		let files=e.dataTransfer.files;
		console.log(files)
		addImage(files)
	}
	loadControl.onclick = function () {
		vue.onPreview();
	}
	function addImage(files){
		//异步处理，教程网址：https://www.runoob.com/js/js-promise.html
		var promise=new Promise(function (resolve, reject) {
			var i=0;
			function startLoad(){
				var reader = new FileReader();
				reader.onload = function() {//成功
					vue.srcList.push(this.result);
					if(i<files.length){
						startLoad();
					}else{
						resolve();
						vue.onPreview();
					}
				}
				reader.onerror=function(e){//出错
					reject(e);
				}
				let file=files[i++]
				reader.filename=file.name;
				reader.readAsDataURL(file);
			}
			startLoad();
		});
		promise.then(()=>{//成功
			loadControl.innerHTML='图片拖入成功，单击任意处可打开'
			vue.onPreview();
		}).catch((e)=>{//失败
			console.error(e);
		})
	}
	let vue=new Vue({
		el: '#app',
		data() {
			return {
				url:'',
				srcList: [
				],
			};
		},
		components: {},
		methods: {
			onPreview() {
				this.$refs.preview.clickHandler();
			},
		},
	})
</script>

</html>